<!-- 选泽牲畜 -->
<template>
	<view class="selection">
		<view class="selection-input">
			<view class="selection-input-icon">
				<i class="iconfont icon-sousuo" style="font-size: 40rpx;"></i>
			</view>
			<input type="text" placeholder="输入牲畜名称或IMEI查询" />
		</view>

		<view class="livestock-item" v-for="(item, index) in lists" :key="index">
			<view class="livestock-info">
				<image src="@/static/imgs/cow.png" alt="" style="width: 60rpx; height: 60rpx;" />
				<view class="livestock-details">
					<view>牛的编号</view>
					<view style="color: #999; font-size: 14px;">IMEI：{{item.F_IMEI}}</view>
				</view>
			</view>
			<view class="livestock-status">
				<view class="status-icon" @click="toggleSelect(index)" :class="{ active: item.selected }">
					<i class="iconfont icon-duihao" v-if="item.selected"></i>
				</view>
			</view>
		</view>
		<button class="btn" @click="confirmSelection">确定</button>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		cattleList
	} from '@/utils/api/Livestock.js'
	const lists = ref([])
	onMounted(async () => {
		let res = await cattleList()
		lists.value = res.data
	})

	// 切换选中状态的方法
	const toggleSelect = (index) => {
		lists.value[index].selected = !lists.value[index].selected
	}

	// 确认选择并返回数据
	const confirmSelection = () => {
		const selectedLivestock = lists.value
			.filter(item => item.selected)
			.map(item => item.F_IMEI) // 提取选中的 IMEI

		// 返回数据到上一个页面
		uni.navigateBack({
			delta: 1,
			success: () => {
				// 通过全局事件或页面通信传递数据
				uni.$emit('livestockSelected', selectedLivestock)
			}
		})
	}
</script>

<style scoped>
	@import '@/static/iconfont/iconfont.css';

	.selection {
		width: 100%;
		min-height: 100vh;
		background-color: #F3F5F8;
	}

	.selection-input {
		width: 90%;
		height: 70rpx;
		margin: 0 auto;
		display: flex;
		padding-top: 40rpx;
	}

	.selection-input input {
		flex: 1;
		height: 70rpx;
		background-color: #fff;
		border-radius: 0rpx 20rpx 20rpx 0rpx;
	}

	.selection-input-icon {
		width: 70rpx;
		height: 70rpx;
		text-align: center;
		line-height: 70rpx;
		background-color: #fff;
		border-radius: 20rpx 0rpx 0rpx 20rpx;
	}

	.livestock-item {
		width: 90%;
		height: 120rpx;
		margin: 20rpx auto;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.livestock-info {
		margin-left: 30rpx;
		display: flex;
		align-items: center;
	}

	.livestock-details {
		display: flex;
		flex-direction: column;
		margin-left: 30rpx;
	}

	.livestock-status {
		margin-right: 30rpx;
	}

	.status-icon {
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		border: 2rpx solid #E2E0E0;
		text-align: center;
		line-height: 36rpx;
		transition: all 0.3s ease;
		/* 添加过渡效果，让样式变化更平滑 */
	}

	.btn {
		width: 100%;
		height: 90rpx;
		background-color: #0BCB75;
	}

	.status-icon.active {
		border: 2rpx solid #0BCB75;
		color: #0BCB75;
	}
</style>